<template>
	<view>
		<topbar title="悬赏详情" jt_c="2" background="background:#E23C63;color:#fff;"></topbar>
		<view class="content dis_f_co">
			<view class="top">
				<view class=" dis_f_sb_b">
					<view class="dis_f_co">
						<view style="margin-bottom: 12rpx;">已抢{{task_num_qiang}}份,剩余{{task_num_surplus}}份·抢完结束</view>
						<view>文字验证:{{verify_text}}</view>
					</view>
					<view style="color: #E23C63;font-size: 34rpx;">+{{task_money}}</view>
				</view>
			</view>
			<view class="ban_xin dis_f_co">
				<view class="xs_ms dis_f_co" style="width: 100%;">
					<view class="dis_f_sb_c" style="width: 100%;padding-bottom: 24rpx;border-bottom: 2rpx solid #eee;margin-bottom: 24rpx;">
						<view style="font-size: 28rpx;">悬赏描述</view>
						<view style="color: #BBBBBB;">点击图片,可以长按保存到相册</view>
					</view>
					<view style="margin-bottom: 10rpx;">
						{{requirement}}
					</view>
					<!-- <view style="color: #E23C63;">备注:注意事项注意事项注意事项注意事项注意事项</view> -->
				</view>
				<view class="xs_ms dis_f_co"  style="width: 100%;">
					<view class="dis_f_sb_c" style="width: 100%;padding-bottom: 24rpx;border-bottom: 2rpx solid #eee;margin-bottom: 24rpx;">
						<view style="font-size: 28rpx;">任务步骤</view>
						<view style="color: #BBBBBB;">点击图片,可以长按保存到相册</view>
					</view>
					<view class="dis_f_co" style="margin-bottom: 40rpx;" v-for="(item,index) in bz_list">
						<view style="font-size: 28rpx;margin-bottom: 12rpx;">步骤{{index+1}}</view>
						<view style="margin-bottom: 12rpx;">{{item.name}}</view>
						<image :src="item.img" class="bz_img"></image>
					</view>
				</view>
				<view class="xs_ms dis_f_co" style="width: 100%;">
					<view class="dis_f_sb_c" style="width: 100%;padding-bottom: 24rpx;border-bottom: 2rpx solid #eee;margin-bottom: 24rpx;">
						<view style="font-size: 28rpx;">审核图样</view>
						<!-- <view style="color: #BBBBBB;">点击图片,可以长按保存到相册</view> -->
					</view>
					<view class="dis_f_sb_c dis_f_w" style="width: 100%;">
						<image class="ty_img" :src="item" mode=""  v-for="(item,index) in examine_images"></image>
					</view>
				</view>
				<view class="qd_btn dis_f_c_c" @click="open" v-if="status_open">开启</view>
				<view class="qd_btn dis_f_c_c" @click="stop" v-if="status_true">暂停</view>
				<view class="qd_btn dis_f_c_c" @click="shelf" v-if="status_true">下架</view>
				<view class="qd_btn dis_f_c_c" @click="cancel" v-if="status_true">强制下架</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				title:'',
				task_num_success:'',
				task_num_surplus:'',
				task_num_qiang:'',
				verify_text:'',
				task_money:'',
				requirement:'',
				examine_images:'',
				status_true:false,
				status_open:false,
				bz_list:[{name:'抖音注册',img:'../../static/a.jpg'},{name:'抖音下载',img:'../../static/a.jpg'},{name:'添加抖音号',img:'../../static/a.jpg'}]
			};
		},
		onLoad(e){
			if(e == undefined) {
				this.$.ti_shi('参数错误');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/xuan_shang/xs_gl');
				}, 2000); 
			}
			this.id = e.id;
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000); 
			}
			if (this.id > 0) {
				this.$.ajax(1, 'post', 'task/task_info', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id
				}, (res) => {
					if(res.code == 1){
						this.title = res.data.title;
						this.requirement = res.data.requirement;
						this.examine_images = res.data.images;
						this.bz_list = res.data.task_images;
						this.task_num_success= res.data.task_num_success;
						this.task_num_surplus= res.data.task_num_surplus;
						this.verify_text= res.data.verify_text;
						this.task_money= res.data.task_money;
						this.task_num_qiang= res.data.task_num_qiang;
						if (res.data.status == 1) {
							this.status_true = true;
						}
						if(res.data.status == 7) {
							this.status_open = true;
						}
					}else{
						this.$.ti_shi(res.msg)
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						} 
					}
				})
			}else{
				this.$.ti_shi('参数错误');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/xuan_shang/xs_gl');
				}, 2000); 
			}
		},
		methods:{
			open(){
				this.$.ajax(1, 'post', 'task/open_task', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id,
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/xuan_shang/xs_gl');
						}, 2000);
					}else{
						this.$.ti_shi(res.msg)
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						} 
					}
					
				})
			},
			stop(){
				this.$.ajax(1, 'post', 'task/stop_task', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id,
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/xuan_shang/xs_gl');
						}, 2000);
					}else{
						this.$.ti_shi(res.msg)
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						} 
					}
					
				})
			},
			shelf(){
				this.$.ajax(1, 'post', 'task/shelf_task', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id,
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/xuan_shang/xs_gl');
						}, 2000);
					}else{
						this.$.ti_shi(res.msg)
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						} 
					}
					
				})
			},
			cancel(){
				uni.showModal({ //提醒用户更新
				    title: "强制下架提醒",   
				    content: '强制下架，接单用户直接返佣',   
				    success: (res) => {  
				        if (res.confirm) {  
				            this.$.ajax(1, 'post', 'task/cancel_task', {
				            	uid:uni.getStorageSync('uid'),
				            	token:uni.getStorageSync('token'),
				            	id:this.id,
				            }, (res) => {
				            	console.log(res)
				            	if(res.code == 1){
				            		this.$.ti_shi(res.msg)
				            		var that = this;
				            		setTimeout(function() {
				            			that.$.open('/pages/xuan_shang/xs_gl');
				            		}, 2000);
				            	}else{
				            		this.$.ti_shi(res.msg)
				            		if(res.code == 9) {
				            			var that = this;
				            			setTimeout(function() {
				            				that.$.open('/pages/login/login');
				            			}, 2000);
				            		} 
				            	}
				            	
				            })
				        }  
				    }  
				}) 
				
				
				
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-top: calc(var(--status-bar-height) + 88rpx);
		width: 100%;
		.top{
			width: 100%;
			height: 124rpx;
			background-color: #FFF5BC;
			font-size: 22rpx;
			color: #222;
			padding: 24rpx 48rpx;
			margin-bottom: 24rpx;
		}
		.ban_xin{
			padding: 0 24rpx;
			width: 100%;
			.xs_ms{
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 36rpx 24rpx;
				font-size: 22rpx;
				margin-bottom: 12rpx;
				.bz_img{
					width: 270rpx;
					height: 270rpx;
					border-radius: 10rpx;
				}
				.ty_img{
					width: 202rpx;
					height: 202rpx;
					margin-bottom: 12rpx;
					border-radius: 10rpx;
				}
			}
			.qd_btn{
				width: 100%;
				height: 98rpx;
				border-radius: 50rpx;
				background-color: #E23C63;
				font-size: 32rpx;
				color: #fff;
				margin-bottom: 12rpx;
			}
		}
	}
</style>
